<template>
  <div>
    <!-- 仅保留柱状图组件，直接渲染子组件 -->
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue' // 对应子组件（原bottomLeftChart）

export default {
  data() {
    return {
      // 简化数据结构：只保留柱状图必需的「品类」和「订购量」
      cdata: {
        category: [], // 横轴：产品名称
        barData: []   // 纵轴：订购量（柱状图核心数据）
      }
    };
  },
  components: {
    Chart, // 注册柱状图子组件
  },
  mounted() {
    // 页面加载时加载数据（硬编码模拟Excel数据，可后续替换为接口请求）
    this.loadExcelData();
  },
  methods: {
    loadExcelData() {
      // 原始产品订购数据（保留您提供的12条记录）
      const orders = [
        { 品名: "鍋蓋把手 L66*W42*H21.5", 订购量: 3244, 短缺量: 3244 },
        { 品名: "上控溫盒,出線孔二杆L116", 订购量: 697, 短缺量: 697 },
        { 品名: "下控溫盒有缺口出線孔一杆", 订购量: 697, 短缺量: 697 },
        { 品名: "左腳座", 订购量: 3041, 短缺量: 3041 },
        { 品名: "下殼蓋(托工)", 订购量: 2881, 短缺量: 2881 },
        { 品名: "裝飾蓋(托工)", 订购量: 2881, 短缺量: 2881 },
        { 品名: "上殼蓋(印銀色877C商標B+D", 订购量: 2881, 短缺量: 2881 },
        { 品名: "右腳架 腳墊孔加肉加厚", 订购量: 15600, 短缺量: 0 },
        { 品名: "隔熱墊塊(上六角下圓16mm", 订购量: 42424, 短缺量: 0 },
        { 品名: "轉軸蓋23g", 订购量: 1521, 短缺量: 1521 },
        { 品名: "轉軸套7.6G", 订购量: 1521, 短缺量: 1521 },
        { 品名: "下殼蓋(托工)", 订购量: 1405, 短缺量: 1405 } // PPJ3634
      ];

      // 清空原有数据（避免重复加载），提取柱状图所需字段
      this.cdata.category = [];
      this.cdata.barData = [];

      orders.forEach(item => {
        this.cdata.category.push(item.品名); // 横轴：添加产品名称
        this.cdata.barData.push(item.订购量); // 纵轴：添加对应订购量
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 固定图表容器尺寸，避免自适应异常
div {
  width: 100%;
  height: 500px; // 与子组件高度适配
  padding: 20px;
  box-sizing: border-box; // 确保padding不影响整体尺寸
}
</style>